<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="toggleMenu()">
        <ion-icon slot="icon-only" name="camera-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-segment [formControl]="activeSegment">
      <ion-segment-button value="news">
        {{'news_title' | translate}}
      </ion-segment-button>
      <ion-segment-button value="discover">
        {{'discover_title' | translate}}
      </ion-segment-button>
    </ion-segment>

    <ion-buttons slot="end">
      <ion-button [routerLink]="[ '/tabs', 'news', 'settings' ]" routerDirection="forward">
        <ion-icon slot="icon-only" name="scan-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar *ngIf="activeSegment.value === 'discover'">
    <div scrollX="true">
      <ion-chip class="scrollX" *ngFor="let dis of discoverCategories"
        [color]="activeDiscover.value === dis.id ? 'primary' : 'medium'">
        <ion-label>{{'discover_categories.' + dis.id | translate}}</ion-label>
      </ion-chip>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>

  <!-- News tab -->
  <div *ngIf="activeSegment.value === 'news'">

    <!-- Post card -->
    <ion-card class="post-card" *ngIf="stories.length">
      <ion-item lines="none" class="post-item">
        <ion-avatar slot="start">
          <ion-img [src]="stories[0].avatar"></ion-img>
        </ion-avatar>
        <ion-button class="post-some" color="light">
          <span class="post-some-title">{{'whats_new' | translate}}</span>
        </ion-button>
        <ion-buttons slot="end">
          <ion-button color="medium">
            <ion-icon slot="icon-only" name="image-outline"></ion-icon>
          </ion-button>
          <ion-button color="medium">
            <ion-icon slot="icon-only" name="disc-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-item>
    </ion-card>

    <!-- Users stories list -->
    <ion-card class="stories-card" scrollX="true">
      <ion-list lines="none" class="story-list scrollX" *ngFor="let story of stories" (click)="openStory($event)"
        routerdirection="forward">
        <ion-item lines="none" class="story-item">
          <ion-avatar class="story-avatar" [ngClass]="{'seen': false}">
            <img [src]="story.avatar">
          </ion-avatar>
        </ion-item>
        <div class="story-author">
          <ion-text color="primary">
            {{story.first_name}}
          </ion-text>
        </div>
      </ion-list>
    </ion-card>

    <!-- Users posts -->
    <ng-container>
      <ion-card class="post-list-card" *ngFor="let post of posts">
        <ion-item lines="none">
          <ion-avatar slot="start">
            <img [src]="post.image">
          </ion-avatar>
          <ion-label>
            {{post.first_name}} {{post.last_name}}
            <p>two minutes ago</p>
          </ion-label>
          <ion-buttons slot="end">
            <ion-button color="medium">
              <ion-icon slot="icon-only" md="ellipsis-vertical-outline" ios="ellipsis-horizontal-outline"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-item>

        <ion-card-content class="post-list-content">
          {{post.content}}
        </ion-card-content>

        <ion-item lines="none" class="ion-no-padding" style="margin-left: 10px;">
          <ion-buttons slot="start">
            <ion-button color="medium">
              <ion-icon slot="start" name="heart-outline"></ion-icon>
              <small>{{post.likes}}</small>
            </ion-button>
            <ion-button color="medium">
              <ion-icon slot="start" name="chatbox-outline"></ion-icon>
              <small>{{post.comments}}</small>
            </ion-button>
            <ion-button color="medium">
              <ion-icon slot="start" name="return-up-forward-outline"></ion-icon>
              <small>{{post.shared}}</small>
            </ion-button>
          </ion-buttons>

          <ion-buttons slot="end">
            <ion-button color="medium">
              <ion-icon size="small" slot="start" name="eye-outline"></ion-icon>
              <small>{{post.views}}</small>
            </ion-button>
          </ion-buttons>
        </ion-item>
      </ion-card>
    </ng-container>
  </div>

  <!-- Discover tab -->
  <div *ngIf="activeSegment.value === 'discover'">
    <ion-grid>
      <ion-row>
        <ng-container *ngFor="let dis of discavery">

          <ng-container *ngIf="dis.type === 'image'">
            <ion-col size="6" *ngFor="let i of dis.data">
              <ion-card class="image-card">
                <img [src]="i.img" />

                <ion-buttons>
                  <ion-button class="button">
                    <ion-icon slot="icon-only" name="heart-outline"></ion-icon>
                  </ion-button>
                </ion-buttons>
              </ion-card>
            </ion-col>
          </ng-container>

          <ng-container *ngIf="dis.type === 'post-image'">
            <ion-col size="12" *ngFor="let i of dis.data">
              <ion-card class="post-image ion-no-margin">
                <ion-item lines="none">
                  <ion-avatar slot="start">
                    <img [src]="i.avatar">
                  </ion-avatar>
                  <ion-label>
                    <small>{{i.author}}</small>
                  </ion-label>
                </ion-item>

                <img [src]="i.img" />

                <ion-item lines="none" class="no-padding-item">
                  <ion-buttons slot="start">
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" name="heart-outline"></ion-icon>
                    </ion-button>
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" name="return-up-forward-outline"></ion-icon>
                    </ion-button>
                  </ion-buttons>

                  <ion-buttons slot="end">
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" md="ellipsis-vertical-outline" ios="ellipsis-horizontal-outline">
                      </ion-icon>
                    </ion-button>
                  </ion-buttons>
                </ion-item>
              </ion-card>
            </ion-col>
          </ng-container>


          <ng-container *ngIf="dis.type === 'post-full'">
            <ion-col size="12" *ngFor="let i of dis.data">
              <ion-card class="post-full ion-no-margin">
                <ion-item lines="none">
                  <ion-avatar slot="start" style="width: 32px;height: 32px;">
                    <img [src]="i.avatar">
                  </ion-avatar>
                  <ion-label>
                    <small>{{i.author}}</small>
                  </ion-label>
                </ion-item>

                <img [src]="i.img" />

                <ion-card-content>
                  {{i.text}}
                </ion-card-content>

                <ion-item lines="none" class="no-padding-item">
                  <ion-buttons slot="start">
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" name="heart-outline"></ion-icon>
                    </ion-button>
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" name="return-up-forward-outline"></ion-icon>
                    </ion-button>
                  </ion-buttons>

                  <ion-buttons slot="end">
                    <ion-button color="medium">
                      <ion-icon slot="icon-only" md="ellipsis-vertical-outline" ios="ellipsis-horizontal-outline">
                      </ion-icon>
                    </ion-button>
                  </ion-buttons>
                </ion-item>

              </ion-card>
            </ion-col>
          </ng-container>
        </ng-container>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>